Setting Up Your Flutter-Woocommerce App
A quick guide
FWoo Store is a one-size-fits-all full mobile app solution for android and iOS specifically tailored for:
1. Woocommerce vendors looking to create mobile apps for their WooCommerce based stores
2. developers looking to use WooCommerce as a BaaS (Backend as a Service)
FWoo Store was made to help developers and vendors save a lot of time and development cost. It only takes a couple of hours or less to integrate your WooCommerce Store and have your store up and running in a mobile app environment.
Here is a list of some of the major features of this app:
-
social login (Google and Facebook)
-
automated emails
-
intro/onboarding screen
-
save multiple cards
-
save multiple addresses
-
paypal payment gateway
-
stripe payment gateway
-
notifications
-
customer support
-
order cancellation
-
dowload invoices, and lots more
Download the demo app on the Play Store https://play.google.com/store/apps/details?id=com.flutter.woocommerce
-
If you are not already a Flutter developer, you will need to install Flutter SDK in your machine as well as having a text editor such as Notepad.
To get started with Flutter:
- head on to https://docs.flutter.dev/get-started/install
- follow the documentaion to get flutter installed.
If you need help or get stuck at any point in this tutorial, reach me on Twitter @apstkingssamuel.
-
You need to have setup a WooCommerce Store.
For you to have a WooCommerce store, you will need to have:
-
a domain name
-
a hosting account
-
wordpress installation
If you probably can't purchase a domain and hosting, I have made a video where you can learn how to get free domain and hosting account for your projects and install WordPress to your site. Click here
If you are new to WooCommerce, please refer to this video tutorial in order to get started with WooCommerce.
In order to reduce the size of the zip file, the packages and dependencies used to build the app were cleaned. To fetch the dependencies, follow the follwing steps:
1. Open your terminal or command prompt. You can get this by searching any of the two terms in your start menu

Select run as administrator. It will open anew window as shown below

2. Navigate to the folder where you extracted the app
To do this, type cd "YOUR APP FOLDER PATH", then click enter. See the example below

3. Run command to get dependencies
Now that you are in your app directory, run the command "flutter pub get" and wait some seconds for the operation to be complete

Your app package name is the unique identifier for your app on your device as well as on the app stores.
It goes like "com.domain.example", where "domain" can either be your comapny's name or your domain name and "example" is the name you wish to name your app.
In our app, I will be naming mine com.flutter.woocommerce
How to do this is open your terminal and run the command below
flutter pub run change_app_package_name:main com.flutter.woocommerce
Remenber to use your own names instead of flutter and woocommerce before running the command
After running the command, you should get something like this

Change app name
-
Locate your AndroidManifest.xml file. To do this, from your project root folder, you will find it according to this path android/app/src/main/AndroidManifest.xml
-
Open the AndroidManifest.xml file in your text editor or IDE. To keep things simple, I will be making use of Notepad in this documentation.
-
At the beginning of the application tag, change the android label to the name you wish to name your app. In my case, I have called it "FWoo Store". See the screenshot below

-
Open your info.plist file located at ios/Runner
-
Locate this block of code below
<key>CFBundleName</key>
<string>FWoo Store</string> //your App name goes here
Change app icon
-
Put your preferred icon in the assets/res folder. It must be a png file
-
Open your pubspec.yaml file (located at your root folder)
-
Locate where you have this block of code

If you have given your icon a different name, change icon.png to the name of your new icon. Don't forget to add the .png extensio
4. In your terminal, run the command flutter pub run flutter_launcher_icons:main, and click on enter

Change App Launch Screen
The launch screen or splash screen is the first screen you see when you launch an app. To change the launch screen:
-
If you want splash screen to be a fullscreen image, edit your image in portrait mode. I usually give mine the resolution of 1080x1920px.
If you want to keep it simple, just use an icon. Make sure that your images are in png format
Add your image to the folder assets/res
-
Open your pubspec.yaml and locate the block of code below

-
If you are using a fullscreen image, just change splash to the name of your fullscreen image.
If you are using an icon, follow steps 4, 5 and 6, else skip to step 7.
-
edit your code to look like below

-
Change color to your preferred hexadecimal value for the background colour of your splash screen
-
In the image property, change icon to the name of the new icon image you have chosen
-
Now, in your terminal, run the following command flutter pub run flutter_native_splash:create

1. To configure your Google login for Android, please refer to this video, start playing it from 01:30 to 05:35
2. To configure your Google login for iOS, please refer to this video, start playing it from 13:35 to 15:10
NOTE: You will need a folder called openssl while following the setup in the video. I have made it available in your app file loctaed at resources folder. Just cut this folder and paste it into a private directory of your choice such as C:UserskingsAppDataLocal. Then copy the path for later.
1. To configure your Facebook login for Android, please refer to this video, start playing it from 00:58 to 06:00
2. To configure your Facebook login for iOS, please refer to this video, start playing it from 17:00 to 18:35
3. Regarless of your platform, make sure you cover 13:53 to 14:46 to add developers and testers to your Facebook setup pending when your app is approved by Facebook and then any Facebook account can login
-
Go to the admin dashboard of your WordPress Installation @ https://your-domain-name.com/wp-admin

-
On the left menu, WooCommerce>>Settings>>Advanced>>Rest API

-
Select Add Key.
-
Give your API keys a description in the description text box.
Set permissions to read/write
Click on the Generate API key button. You will get a screen like this

Do not close this page yet as you will not be able to see these keys again after now
-
In your app folder, open the api_constants.dart file (located at lib/constants)
-
Copy your consumer key and app paste it in the key variable
Copy your consumer secret and app paste it in the secret variable
In the url and tokenURL variables, add your websites domain name with the https protocol just before the "/wp-json". See example below

-
In your WooCommerce dashboard, select Plugins from the left menu and select Add new
-
In the search box, type in JWT. Install the JWT plugin by "Useful Team" and click activate

-
Login to your website's hosting control panel

Select File Manager. It will open all your website files in a new window
If your website is not a subdomain, your website folder name should be something like /home/your-domain-name and it is automatically open when the load the page.
Scroll down until you find the "public_html" folder as highlighted in the screenshot below. Then double click to open the folder.

On the other hand, if your website is a sub-domain, scroll down and locate your subdomain folder. See example as highlighted in the screenshot below. Then double click to open the folder

-
Now, you are in your website's folder, locate the .htaccess file, right-click on it and selct the edit option. This will open the file in a new window where you can edit it

-
Copy and paste the block this block of code at the top of the file
RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
-
Go back to your website file manager, locate your wp-config.php file on the same page, right-click and select edit.

-
Locate where your database settings are declared as shown below

-
Add these blocks of code to the top of the line
define('JWT_AUTH_SECRET_KEY', 'top-secret-key');
define('JWT_AUTH_CORS_ENABLE', true);
-
Still in your website file manager, find the class-wc-rest-webhook-controller.php file (located at /wp-content/plugins/woocommerce/includes/rest-api/Controllers/Version3/class-wc-rest-webhooks-controller.php)
-
Right-click and select the edit option. This will open the file in a new window where you can edit it.
-
Go to your app folder, open the cart_webhook.php file located at /resources folder.
-
Copy all the content, go back to your class-wc-rest-webhook-controller.php file in your browser and replace all the content there with the new one you have copied, then save. Everything should be about 194 lines thereabout.

-
Back to your website file manager, find the class-auth.php file located at /wp-content/plugins/jwt-auth
-
Right-click on the file, select edit.
-
Go to your app folder, open the social_login.php file located at /resources folder.
-
Copy all the content, go back to your class-auth.php file in your browser and replace all the content there with the new one you have copied, then save

-
Open your payment_screen.dart file located at /lib/presentations/screens
-
Kindly note that 'Cash On Delivery' option is available by default without need for any configuration
PAYSTACK
If you do business in Africa, you can use Paystack. To set up Paystack,
-
Go to your Paystack dashboard. Click here

-
To retrieve your public key, on the left menu, go to Settings and select the API Keys & Webhooks tab.

-
Copy your public key. You can use your test keys if your app is not yet in production
-
Locate the block of code shown below and paste the keys you have copied to the publicKey variable

-
When you build your app after setting up everything in this documentation, test your payments before changing it to live keys. Your payments in test mode or live mode can be seen on your dashboard.
PAYPAL
-
Locate the block of code below in your payment.dart file

-
Visit PayPal site for developers here and click on the "Log Into Dashboard" button

-
Now, in your dashboard, on the left menu, under SandBox, select Accounts

-
By default, 2 sandbox accounts are created for you (one merchant account and one personal account). You should keep click on them to see your account details and save them somewhere because you will be needing them to test payments.
Sandbox accounts are used for creating payments in test mode.
-
On the menu, select My apps & credentials. Click on create a new App in Sandbox mode if your app is still in developent or Live mode when you are ready to ship your app to production.
-
Add your app name
Select 'Merchant' as your app type
Where you have to select a sandbox account, select the mechant account. It is the one that ends with "business@example.com"
Click on create when you are done.
Your new credentials are displayed as shown below

-
Copy the client ID and secret key and paste them in the clientID and secretKey variables respectively as earlier shown above in the block of code image at the first step of this Paypal setup.
-
To confirm your PayPal test mode payments, go to https://www.sandbox.paypal.com/ng/signin
-
Here, you will be required to sign in with the merchant sandbox credentials and not your real PayPal account. See image below

-
After signing in, you will see your dashboard and transactions like below

STRIPE
-
Heads up: This stripe option will work perfectly while your app is on debug mode. However, while publishing to your Play Store, Google will reject it. This is because it is currently uncompatible with Android version 12 (Android target version 31). If you have to use Stripe, you will have to target version 11 (Android target version 30).
To do this, You will simply have to target android 11 (compile and target version 30 instead of 31 in your build.gradle file) Then downgrade all your plugins to the versions they were at almost 8-10 months ago before android 12 was launched.
If you need help with this contact me on twitter
-
Login to stripe account. Click here
-
After logging in, towards the top-right corner, enable test mode

-
At the bottom-right corner, you will find your publishable key and secret key

-
Locate this block of code

-
Copy your both keys and assign them to publishableKey and secretKey accordingly
-
Locate this block of code below and delete it

-
Now, the payWithStripe function is all commented. If you are using an IDE uncomment the code. For Novices using Notepad, uncomment the code by removing all the '//' symbols infront of the code.

In this video, I have explained how to send automated emails to customers. Watch from 52:45 to 01:02:44
Now, we have finished all necessary setups for our app.
Go to your terminal and now write the command flutter run and hit enter. Make sure that your device is connected to your machine.
For further assistance, reach me on twitter
SOCIAL AUTH CONFIGURATION